<template>
  <el-button plain @click="open">添加</el-button>
  <el-table :data="tableData">
    <el-table-column prop="id" type="index" label="ID" width="120" />
    <el-table-column prop="pileName" label="name"/>
<!--    <el-table-column prop="status" label="状态">-->
<!--      <template #default="scope">-->
<!--        <el-tag v-if="scope.row.status===true" type="success">在线</el-tag>-->
<!--        <el-tag v-else type="danger">离线</el-tag>-->
<!--      </template>-->
<!--    </el-table-column>-->
    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button size="small" type='primary' @click="update(scope.row)">编辑</el-button>
        <el-button size="small" type='danger' @click="delByID(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue'
import get from "../../../api/get";
import { ElMessage, ElMessageBox } from 'element-plus'
import post from "../../../api/post";
import put from "../../../api/put";
import del from "../../../api/del";

const search = ref("")


const tableData = ref([])
const url="/cloud-service-charging/pile"
const subject="用户"


const fetchList=()=>get(url).then(res=>tableData.value=res)

fetchList()

const open = () => {
  ElMessageBox.prompt(`请输入${subject}名`, `添加${subject}`, {confirmButtonText: '确认', cancelButtonText: '取消'}).then(({ value }) => {
    post(url,{pileName:value}).then(res=>tableData.value=res)
    ElMessage({type: 'success', message: `${subject}添加成功`,})
  })
}

const update = (row) => {
  ElMessageBox.prompt(`请输入${subject}名`, `修改${subject}`, {confirmButtonText: '确认', cancelButtonText: '取消'}).then(({ value }) => {
    put(url,{id:row.id,pileName:value}).then(res=>tableData.value=res)
    ElMessage({type: 'success', message: `${subject}修改成功`,})
  })
}

const delByID=(id)=>del(url+"/"+id).then(res=>tableData.value=res)




</script>